<template>
  <div>
    <div class="topBox">
      <div class="L"><a href="index.html">LOGO</a></div>
      <div class="C">
        <div class="saerchbox">
          <input name=""
                 type="text"
                 placeholder="请输入您要搜索的内容" /><img src="/assets/images/ss.png" />
        </div>
      </div>
      <div class="R"><img src="/assets/images/tr.png" /></div>
    </div>
    <div class="clear"></div>
    <div class="aui-m-slider">
      <div class="m-slider"
           data-ydui-slider>
        <div class="slider-wrapper">
          <div class="slider-item">
            <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
          </div>
          <div class="slider-item">
            <a href="javascript:;"> <img src="/assets/images/banner.jpg" /> </a>
          </div>
        </div>
        <div class="slider-pagination"></div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="lqgwBox">
      <ul>
        <li v-for="item of TypeList"
            :key="item.id">
          <router-link :to="{path:'/product/product/index',query:{typeid:item.id}}">
            <img :src="item.cover_cdn" />
            <p>{{item.name}}</p>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="contitbox">
      <p>新品<span>•</span>推荐</p>
    </div>
    <div class="clear"></div>
    <ul class="proul">
      <li v-for="item of NewList"
          :key="item.id">
        <div class="con">
          <a href="detail.html">
            <img :src="item.cover_cdn" />
            <p><span>￥</span>{{item.price}}</p>
          </a>
        </div>
      </li>
    </ul>
    <div class="clear"></div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <Menus />
  </div>
</template>
<script>
import Menus from './common/Menus.vue'
export default {
  components: {
    Menus,
  },
  created() {
    this.list()
  },
  data() {
    return {
      TypeList: [],
      NewList: [],
      HotList: [],
    }
  },
  methods: {
    async list() {
      let result = await this.$api.Home()
      console.log(result);
      let data = result.data
      this.TypeList = data.TypeList
      this.NewList = data.NewList
    },
  },
}
</script>
